<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>API Proxy Tweaker</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    :root { color-scheme: light dark; }
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; margin: 0; padding: 12px; width: 380px; }
    header { display:flex; justify-content: space-between; align-items:center; margin-bottom:10px; }
    h1 { font-size: 16px; margin: 0; }
    .row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
    .toggle { display:flex; align-items:center; gap:6px; }
    button { padding:6px 10px; border: 1px solid #8883; border-radius:6px; background:#f3f3f3; cursor:pointer; }
    button:hover { background:#e9e9e9; }
    ul { list-style:none; padding:0; margin:0; max-height: 300px; overflow:auto; }
    li { padding:6px 0; border-bottom: 1px solid #ddd3; }
    .meta { font-size:12px; color: #666; }
    .badge { display:inline-block; font-size: 11px; padding:2px 6px; border-radius: 999px; border:1px solid #9995; margin-right:6px; }
    .event-mock { background:#ffe7e7; }
    .event-mod { background:#e7f7ff; }
    .event-pass { background:#eef7e7; }
    .footer { display:flex; justify-content: space-between; margin-top: 8px; }
  </style>
</head>
<body id="popup">
  <header>
    <h1>API Proxy</h1>
    <div class="toggle">
      <input id="enabledSwitch" type="checkbox" />
      <label for="enabledSwitch">启用</label>
    </div>
  </header>

  <div class="row">
    <button id="openOptions">管理规则</button>
    <button id="refreshLogs">刷新日志</button>
    <button id="deleteLogs">清空</button>
    <small id="ruleCountInfo" style="margin-left:auto;color:#666;"></small>
  </div>

  <section>
    <h3 style="font-size:14px; margin:8px 0;">最近日志</h3>
    <ul id="logList"></ul>
  </section>

  <script src="jquery-3.7.1.slim.min.js"></script>
  <script src="popup-app.js"></script>
</body>
</html>